<template>
    <div>
        <el-card class="login-form-layout">
            <el-form
                     :model="loginForm"
                     :rules="loginRules"
                     ref="loginForm"
                     label-position="left">
                <div style="text-align: center">
                    <img src="../../assets/img/login_center.png" style="width: 56px;height: 56px;color: #409EFF">
                </div>
                <h2 class="login-title color-main">Security-Vue</h2>
                <el-form-item prop="username">
                    <el-input name="username"
                              type="text"
                              v-model="loginForm.username"
                              autoComplete="on"
                              placeholder="请输入用户名">

                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input name="password"
                              type="password"
                              @keyup.enter.native="handleLogin"
                              v-model="loginForm.password"
                              autoComplete="on"
                              placeholder="请输入密码">

                    </el-input>
                </el-form-item>
                <el-form-item style="margin-bottom: 60px">
                    <el-button style="width: 100%" type="primary" :loading="loginLoading" @click.native.prevent="handleLogin">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <img src="../../assets/img/login_center_bg.png" class="login-center-layout">

    </div>
</template>

<script>

    import axiosHttpUtil from '../service/axiosHttpUtil.js'
    import serviceApi from '../service/serviceApi.js'
    export default {
        name: 'login',
        data() {
            // const validateUsername = (rule, value, callback) => {
            //     if (!isvalidUsername(value)) {
            //         callback(new Error('请输入正确的用户名'))
            //     } else {
            //         callback()
            //     }
            // };
            // const validatePass = (rule, value, callback) => {
            //     if (value.length < 3) {
            //         callback(new Error('密码不能小于3位'))
            //     } else {
            //         callback()
            //     }
            // };
            return {
                loginForm: {
                    username: '110110',
                    password: '123456',
                },
                loginRules: {
                    username: [{required: true, trigger: 'blur'}],
                    password: [{required: true, trigger: 'blur'}]
                },
                loginLoading:false,
            }
        },
        methods: {

            handleLogin() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        this.loginLoading=true;
                        axiosHttpUtil(serviceApi.login, {
                            // 去除两端空格
                            username: this.loginForm.username.trim(),
                            password: this.loginForm.password.trim(),
                        }).then((res) => {
                            this.loginLoading=false;
                            if(res.status===200){
                                localStorage.setItem("ms_username",res.data.name);
                                this.$router.push('/');
                            }else if(res.status===505){
                                this.$message({type: 'error', duration: 1000, message: res.data.message, center: true});
                            }else{
                                this.$message({type: 'error', duration: 1000, message:"服务器连接异常", center: true});
                            }

                        }, (error) => {
                            console.log(error)
                        });

                    } else {
                        console.log('参数验证不合法！');
                        return false
                    }
                })
            },

        }
    }
</script>

<style scoped>
    .login-form-layout {
        position: absolute;
        left: 0;
        right: 0;
        width: 360px;
        margin: 140px auto;
        border-top: 10px solid #409EFF;
    }

    .login-title {
        margin-top: 10px;
        margin-bottom: 10px;
        text-align: center;
    }

    .login-center-layout {
        background: #409EFF;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin-top: 200px;
    }
    .color-main {
        color: #409eff;
    }
</style>
